*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Architects Daughter', cursive;
  font-family: 'Roboto', sans-serif;
  background: url(../img/background.png);
  
}



.limit {
  border-radius: 20px;
  max-width: 800px;
  min-width: 170px;
  min-height: 170px;
  flex-wrap: wrap;
  padding: 20px;
  margin: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px orange;
  background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  &__inner {
    width: 130px;
    height: 130px;
    background: linear-gradient(to bottom, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
    margin: 5px;
    display: flex;
    transition: all 0.5s cubic-bezier(0.61, 1, 0.88, 1);
    box-shadow: -6px 15px 20px 5px #000000;
    &:hover{
       margin-left: -50px;
       margin-top: 45px;
       transform: rotate3d(5, -3, 0.5, -15deg) scale(1.2) ;
       -webkit-box-shadow: -11px -6px 41px 21px #000000; 
       box-shadow: -11px -6px 41px 21px #000000;
    }
    &:focus{
      margin-left: -50px;
      margin-top: 45px;
      transform: rotate3d(5, -3, 0.5, -15deg) scale(1.2) ;
   }
  }
  }
  // input form starts here
  form{
    display: inline-block;
    
  }

  .notice{
    width: 123px;
    height: 125px;
    margin: 0px;
    background: none;
    border: none;
    resize: none;
    font-family: 'Architects Daughter', cursive;
    font-weight: bold;
    hyphens: auto;
    
    
    &:focus{
      outline: none;
      
    }
  }

.edited{
  width: 130px;
  height: 130px;
  background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
  margin: 5px;
}

.btn {
  margin: 5px;
  justify-content: center;
  border-radius: 5px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  color: orange;
  border: solid 1px orange;
  transition: all 0.1s cubic-bezier(0.61, 1, 0.88, 1);
  height: 50px;
  padding-top: 15px;  
  &:hover {
    border-radius: 7px;
    background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    font-size: 15px;
  }

  &:active {
    background: linear-gradient(to bottom, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
    border: 2px solid black;
    color:black;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  &:focus{
    outline: none;
  }
}
.scndbtn {
  justify-content: center;
  border-radius: 5px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  color: orange;
  border: solid 1px orange;
  transition: all 0.1s cubic-bezier(0.61, 1, 0.88, 1);
  height: 50px;
  margin: 5px;
  padding-top: 15px;
  
  &:hover {
    border-radius: 7px;
    background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  font-size: 15px;
  }
  &:active{
    background: linear-gradient(to bottom, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
    border: 2px solid black;
    color:black;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }    
  &:focus{
    outline: none;
  }
}

.svbtn {
  justify-content: center;
  border-radius: 5px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  color: orange;
  border: solid 1px orange;
  transition: all 0.1s cubic-bezier(0.61, 1, 0.88, 1);
  height: 50px;
  margin: 5px;
  padding-top: 15px;
  
  &:hover {
    border-radius: 7px;
    background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  font-size: 15px;
  }
  &:active{
    background: linear-gradient(to bottom, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
    border: 2px solid black;
    color:black;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }    
  &:focus{
    outline: none;
  }
}

.ldbtn {
  justify-content: center;
  border-radius: 5px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  color: orange;
  border: solid 1px orange;
  transition: all 0.1s cubic-bezier(0.61, 1, 0.88, 1);
  height: 50px;
  margin: 5px;
  padding-top: 15px;
  
  &:hover {
    border-radius: 7px;
    background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  font-size: 15px;
  }
  &:active{
    background: linear-gradient(to bottom, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
    border: 2px solid black;
    color:black;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }    
  &:focus{
    outline: none;
  }
}

.note{
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  color: orange;
  border: solid 1px orange;
  transition: all 0.1s cubic-bezier(0.61, 1, 0.88, 1);
  width: 240px;
  height: 125px;
  margin: 5px;
  resize: none;
  font-family: 'Architects Daughter', cursive;
  font-weight: bold;
  hyphens: auto;
  &:hover {
    border-radius: 7px;
    background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    font-size: 15px;
  }
  &:active{
    background: linear-gradient(to bottom, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
    border: 2px solid black;
    color:black;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  &:focus{
    outline: none;
  } 
}




.close {
  position: sticky;
  right: 3px;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  }
  .close:hover {
  opacity: 1;
  }
  .close:before, .close:after {
  position: absolute;
  left: 120px;
  top: 0px;
  content: ' ';
  height: 20px;
  width: 3px;
  background-color: red;
  }
  .close:before {
  transform: rotate(45deg);
  }
  .close:after {
  transform: rotate(-45deg);
  }




  .container{
    display: flex;
    flex-direction: row;
  }

@media(max-width: 510px){
  .container{
    display: flex;
    flex-direction: column;
  }
  
}